import { Image } from 'antd';
import { RightOutlined } from '@ant-design/icons';
import { memo } from 'react';
import { useMemoizedFn } from 'ahooks';
import { useHistory } from 'react-router';
import { BasePage } from '../styles';
import {
  Container,
  Footer,
  OperationBox,
  School,
  SubTitle,
  Title,
} from './styles';
import BadgeAndName from './assets/badge_name.jpg';

const Index: React.FC = () => {
  const history = useHistory();

  const handleSkipToCatalog = useMemoizedFn(() => {
    history.push('/catalog');
  });

  return (
    <BasePage>
      <Container onClick={handleSkipToCatalog}>
        <Title>
          <div className="">2022 education achievements exhibition</div>
          <div>
            Student innovation and entrepreneurship education achievements
          </div>
        </Title>

        <SubTitle>
          <span>西北工业大学</span>
          <span>2 0 2 2届</span>
          <span>学生创新创业</span>
          <span>教育成果展</span>
        </SubTitle>

        <School>
          {/* <Image width={80} height={80} src={Badge} /> */}
          <Image width={500} src={BadgeAndName} />
        </School>

        <Footer>
          <p>
            Snapshot@0.0.1 西北工业大学学生创新创业教育成果展 |
            全部作品版权归西北工业大学及作者本人所有并授权西北工业大学为唯一官方使用者
          </p>
          <p>网站技术版权归西北工业大学所有 | 版权事务联系邮箱 | 备案号：</p>
        </Footer>

        <OperationBox onClick={handleSkipToCatalog}>
          <div>
            <RightOutlined />
          </div>
          <div>
            <span>进入观展</span>
            <span>ENTER</span>
          </div>
        </OperationBox>
      </Container>
    </BasePage>
  );
};

export default memo(Index);
